<template>
  <div id="page4-index" ref="appRef">
    <div class="page-title">电煤供需平衡监测分析</div>
    <div class="bg">
      <div class="render-item">
        <div class="box-header">煤炭供应</div>
        <div class="box-container">
          <div class="box-chart">
            <div class="box-title">国内原煤产量</div>
            <div style="height: 100%">
              <chartOne />
            </div>
          </div>
          <div class="box-chart">
            <div class="box-title">煤炭进口量</div>
            <div style="height: 100%">
              <chartTwo />
            </div>
          </div>
          <div class="box-chart">
            <div class="box-title">原煤生产分布情况</div>
            <div style="height: 100%">
              <chartThird />
            </div>
          </div>
          <div class="box-chart">
            <div class="box-title">煤炭进口来源国分布情况</div>
            <div style="height: 100%">
              <chartFour />
            </div>
          </div>
        </div>
      </div>
      <div class="render-item">
        <div class="main-header">
          <div class="main-header-item">
            <div class="info-container info-container-item1">
              <div>
                <span class="number">5.25</span>
                <span class="unit">亿吨</span>
              </div>
              <div class="description">煤炭进口总量</div>
            </div>
            <div class="info-container info-container-item2">
              <div>
                <span class="number">48.57</span>
                <span class="unit">亿吨</span>
              </div>
              <div class="description">国内原煤产量</div>
            </div>
            <div class="info-container info-container-item5">
              <div>
                <span class="number">53.82</span>
                <span class="unit">亿吨</span>
              </div>
              <div class="description">2024年全社会煤炭供应总量</div>
            </div>
          </div>
          <div class="main-header-item">
            <div class="proportion-info">
              <div class="proportion-info-value">1.10</div>
              <div class="proportion-info-title">供需比</div>
            </div>
          </div>
          <div class="main-header-item">
            <div class="info-container info-container-item3">
              <div>
                <span class="number">5.25</span>
                <span class="unit">亿吨</span>
              </div>
              <div class="description">发电行业煤炭消费总量</div>
            </div>
            <div class="info-container info-container-item4">
              <div>
                <span class="number">5.25</span>
                <span class="unit">亿吨</span>
              </div>
              <div class="description">非电行业煤炭消费总量</div>
            </div>
            <div class="info-container info-container-item6">
              <div>
                <span class="number">48.93</span>
                <span class="unit">亿吨</span>
              </div>
              <div class="description">2024年全社会煤炭消费总量</div>
            </div>
          </div>
        </div>
        <div class="main-container">
          <!-- <dv-scroll-board :config="dataConfig" style="width: 98%; height: 98%; left: 50px" /> -->
          <div style="width: 98%; height: 96%; margin-left: -20px; min-height: 0">
            <el-table
              class="custom-table"
              border
              :data="tableData"
              :header-row-style="headerRowStyle"
              :row-style="rowStyle"
              :row-class-name="
                ({ rowIndex }) => {
                  // return rowIndex % 2 === 0 ? 'odd-row' : 'even-row'
                  return `custom-row-${rowIndex}`
                }
              "
            >
              <el-table-column prop="name" align="center" label="" />
              <el-table-column prop="2017年" align="center" label="2017年" />
              <el-table-column prop="2018年" align="center" label="2018年" />
              <el-table-column prop="2019年" align="center" label="2019年" />
              <el-table-column prop="2020年" align="center" label="2020年" />
              <el-table-column prop="2021年" align="center" label="2021年" />
              <el-table-column prop="2022年" align="center" label="2022年" />
              <el-table-column prop="2023年" align="center" label="2023年" />
              <el-table-column prop="2024年" align="center" label="2024年" />
            </el-table>
          </div>
        </div>
      </div>
      <div class="render-item">
        <div class="box-header">应用展望</div>
        <div class="box-container-right">
          <div class="col-title col-title1">
            <span>支撑新型电力系统建设</span>
          </div>
          <div class="col-title col-title2">
            <span>辅助政府科学决策</span>
          </div>
          <div class="box-chart">
            <div class="box-title1">电煤供需分析</div>
            <div class="box-chart-text text1">电煤兜底需求预测</div>
            <div class="box-chart-text text2">优化燃煤发电调度计划</div>
            <div class="box-chart-text text3">电煤供需平衡分析</div>
            <div class="box-chart-text text4">一次能源供给充裕度预警</div>
            <div class="box-chart-text text5">“电-煤”联动保供</div>
          </div>
          <div class="box-chart">
            <div class="box-title2">全国煤炭供需分析</div>
            <div class="box-chart-text text6">全国煤炭消费</div>
            <div class="box-chart-text text7">国内原煤生产</div>
            <div class="box-chart-text text8">煤炭储备保障</div>
            <div class="box-chart-text text9">国际煤炭进口</div>
            <div class="box-chart-text text10">煤炭经济调节</div>
            <div class="box-chart-text text11">煤炭供需比</div>
            <div class="box-chart-text text12">煤炭生产调控</div>
          </div>
          <div class="box-chart">
            <div class="box-title3">拓展应用</div>
            <div class="box-chart-text text13">电力电量平衡</div>
            <div class="box-chart-text text14">优化调度</div>
            <div class="box-chart-text text15">全社会电力需求预测</div>
            <div class="box-chart-text text16">电网规划</div>
            <div class="box-chart-text text17">新能源电力电量预测</div>
            <div class="box-chart-text text18">负荷管理</div>
          </div>
          <div class="box-chart">
            <div class="box-title4">拓展应用</div>
            <div class="box-chart-text text19">行业煤炭供需关系</div>
            <div class="box-chart-text text20">冶煤资源配置</div>
            <div class="box-chart-text text21">各行业煤炭消费分析</div>
            <div class="box-chart-text text22">绿色低碳转型</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import useDraw from '@/utils/useDraw'
import ChartOne from './chart-one/index'
import ChartTwo from './chart-two/index'
import ChartThird from './chart-third/index'
import ChartFour from './chart-four/index'

// const dataConfig = reactive({
//   header: ['', '2017年', '2018年', '2019年', '2020年', '2021年', '2022年', '2023年', '2024年'],
//   data: [
//     ['煤炭供应总量', '37.94', '39.79', '41.46', '42.05', '44.49', '48.51', '51.85', '53.82'],
//     ['国内原煤产量', '35.24', '36.98', '38.46', '39.02', '41.28', '45.58', '47.1', '48.57'],
//     ['煤炭进口产量', '2.70', '2.81', '3.00', '3.03', '3.23', '2.93', '4.74', '5.25'],
//     ['煤炭消费总量 ', '37.26', '38.97', '40.33', '41.02', '44.86', '45.42', '48.29', '48.93'],
//     ['发电行业用煤', '18.90', '20.71', '21.09', '21.35', '24.68', '25.53', '27.11', '27.23'],
//     ['非电行业用煤', '18.36', '18.26', '19.24', '19.67', '20.18', '19.88', '21.17', '21.69'],
//     ['供需比', '1.02', '1.02', '1.03', '1.03', '0.99', '1.07', '1.07', '1.10']
//   ],
//   oddRowBGC: 'rgba(46, 175, 240, 0)',
//   evenRowBGC: 'rgba(67, 207, 124, 0.3)',
//   headerBGC: 'rgba(77, 127, 255, 0.72)',
//   waitTime: 60000,
//   align: ['center', 'center', 'center'],
//   headerHeight: 120
// })

const tableData = ref<object[]>([
  {
    name: '煤炭供应总量',
    '2017年': '37.94',
    '2018年': '39.79',
    '2019年': '41.46',
    '2020年': '42.05',
    '2021年': '44.49',
    '2022年': '48.51',
    '2023年': '51.85',
    '2024年': '53.82'
  },
  {
    name: '国内原煤产量',
    '2017年': '35.24',
    '2018年': '36.98',
    '2019年': '38.46',
    '2020年': '39.02',
    '2021年': '41.28',
    '2022年': '45.58',
    '2023年': '47.1',
    '2024年': '48.57'
  },
  {
    name: '煤炭进口产量',
    '2017年': '2.70',
    '2018年': '2.81',
    '2019年': '3.00',
    '2020年': '3.03',
    '2021年': '3.23',
    '2022年': '2.93',
    '2023年': '4.74',
    '2024年': '5.25'
  },
  {
    name: '煤炭消费总量',
    '2017年': '37.26',
    '2018年': '38.97',
    '2019年': '40.33',
    '2020年': '41.02',
    '2021年': '44.86',
    '2022年': '45.42',
    '2023年': '48.29',
    '2024年': '48.93'
  },
  {
    name: '发电行业用煤',
    '2017年': '18.90',
    '2018年': '20.71',
    '2019年': '21.09',
    '2020年': '21.35',
    '2021年': '24.68',
    '2022年': '25.53',
    '2023年': '27.11',
    '2024年': '27.23'
  },
  {
    name: '非电行业用煤',
    '2017年': '18.36',
    '2018年': '18.26',
    '2019年': '19.24',
    '2020年': '19.67',
    '2021年': '20.18',
    '2022年': '19.88',
    '2023年': '21.17',
    '2024年': '21.69'
  },
  {
    name: '供需比',
    '2017年': '1.02',
    '2018年': '1.02',
    '2019年': '1.03',
    '2020年': '1.03',
    '2021年': '0.99',
    '2022年': '1.07',
    '2023年': '1.07',
    '2024年': '1.10'
  }
])

const headerRowStyle = {
  height: '126px',
  fontSize: '50px',
  background: 'linear-gradient(180deg, rgba(77, 127, 255, 0.72) 0%, rgba(46, 105, 255, 0.19) 100%)',
  color: '#fff'
}

const rowStyle = {
  height: '90px',
  fontSize: '45px'
}

// Setup for responsiveness
const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()

// Lifecycle hooks
onMounted(() => {
  windowDraw()
  calcRate()
})

onUnmounted(() => {
  unWindowDraw()
})
</script>

<style lang="scss" scoped>
#page4-index {
  ::v-deep .dv-scroll-board .header-item {
    font-size: 50px !important;
  }
  ::v-deep .dv-scroll-board .rows .row-item {
    font-size: 50px;
    color: #fff;
  }
  ::v-deep .dv-scroll-board .rows .row-item .ceil {
    border: 1px solid rgba(77, 127, 255, 0.4) !important;
  }
  div {
    box-sizing: border-box;
  }
  color: #d3d6dd;
  width: 15360px;
  height: 2160px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  .page-title {
    font-size: 120px;
    color: #fff;
    position: absolute;
    top: 150px;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 0px 20px 20px rgba(255, 255, 255, 0.3);
    z-index: 1;
  }
  .bg {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 136px 200px 50px 200px;
    background-image: url('../../assets/bgimg/4@3x.png');
    background-size: cover;
    background-position: center center;
    display: flex;
    .render-item {
      width: 33%;
      height: 100%;
      position: relative;
      // border: 1px solid red;
      .box-header {
        width: 100%;
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 80px;
        font-weight: 400;
        letter-spacing: 0px;
        color: #fff;
        text-shadow: 0 0 5px #ffffff, /* 内部发光 */ 0 0 10px #ffffff, /* 更亮发光 */ 0 0 20px #6ec7ff,
          /* 蓝色发光 */ 0 0 30px #6ec7ff, /* 强蓝色发光 */ 0 0 40px #6ec7ff, /* 深蓝色光晕 */ 0 0 50px #6ec7ff,
          /* 外部深蓝光 */ 0 0 75px #6ec7ff; /* 扩散光晕 */
        margin-bottom: 140px;
      }
      .box-container {
        width: 100%;
        height: calc(100% - 140px);
        display: flex;
        gap: 0px 70px;
        flex-wrap: wrap;
        .box-chart {
          // border: 1px yellow solid;
          width: calc(50% - 50px);
          height: calc(50% - 160px);
          position: relative;
          .box-title {
            font-size: 60px;
            color: #fff;
            // 居中
            position: absolute;
            top: -50px;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
      .box-container-right {
        .col-title {
          font-size: 70px;
          color: #fff;
          writing-mode: vertical-rl; /* 文字从上到下排列 */
          text-orientation: upright; /* 文字保持直立 */
          // 文字间距
          letter-spacing: 0.2em;
        }
        .col-title1 {
          position: absolute;
          top: 36%;
          left: 45.2%;
        }
        .col-title2 {
          position: absolute;
          top: 39%;
          left: 54.4%;
        }
        width: 100%;
        height: calc(100% - 140px);
        display: flex;
        flex-wrap: wrap;
        .box-chart-text {
          font-size: 45px;
          background-image: linear-gradient(to right, rgba(12, 205, 223, 1), #fff);
          background-clip: text;
          color: transparent;
          display: inline-block;
          line-height: 1.2;
          vertical-align: middle;
        }

        .box-chart {
          // border: 1px yellow solid;
          width: 50%;
          height: calc(50% - 140px);
          position: relative;
          .text1 {
            position: absolute;
            top: 160px;
            left: 140px;
          }
          .text2 {
            position: absolute;
            top: 158px;
            left: 1300px;
            rotate: -7deg;
          }
          .text3 {
            position: absolute;
            top: 470px;
            left: 140px;
          }
          .text4 {
            position: absolute;
            top: 320px;
            left: 1250px;
            rotate: -2deg;
          }
          .text5 {
            position: absolute;
            top: 470px;
            left: 1350px;
            rotate: 2deg;
          }
          .text6 {
            position: absolute;
            top: 175px;
            left: 450px;
          }
          .text7 {
            position: absolute;
            top: 175px;
            left: 1640px;
          }
          .text8 {
            position: absolute;
            top: 310px;
            left: 500px;
          }
          .text9 {
            position: absolute;
            top: 375px;
            left: 1520px;
          }
          .text10 {
            position: absolute;
            top: 440px;
            left: 550px;
          }
          .text11 {
            position: absolute;
            top: 575px;
            left: 650px;
          }
          .text12 {
            position: absolute;
            top: 575px;
            left: 1400px;
          }
          .text13 {
            position: absolute;
            top: 145px;
            left: 240px;
          }
          .text14 {
            position: absolute;
            top: 146px;
            left: 1420px;
          }
          .text15 {
            position: absolute;
            top: 346px;
            left: 150px;
          }
          .text16 {
            position: absolute;
            top: 346px;
            left: 1490px;
          }
          .text17 {
            position: absolute;
            top: 550px;
            left: 240px;
          }
          .text18 {
            position: absolute;
            top: 550px;
            left: 1420px;
          }
          .text19 {
            position: absolute;
            top: 210px;
            left: 440px;
            rotate: 3deg;
          }
          .text20 {
            position: absolute;
            top: 210px;
            left: 1700px;
          }
          .text21 {
            position: absolute;
            top: 490px;
            left: 450px;
          }
          .text22 {
            position: absolute;
            top: 490px;
            left: 1700px;
            rotate: -1deg;
          }
          .box-title1,
          .box-title3 {
            font-size: 60px;
            color: #fff;
            // 居中
            position: absolute;
            top: -50px;
            left: 45%;
            transform: translate(-50%, -50%);
          }
          .box-title2,
          .box-title4 {
            font-size: 60px;
            color: #fff;
            // 居中
            position: absolute;
            top: -50px;
            left: 56%;
            transform: translate(-50%, -50%);
          }
        }
      }
    }
    .render-item:nth-child(2) {
      width: 49%;
      height: 100%;
      .main-header {
        height: 60%;
        // border: 1px solid yellow;
        display: flex;
        .main-header-item {
          width: 43%;
          height: 100%;
          // border: 1px solid yellow;
          position: relative;
          .info-container {
            width: 660px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .number {
              font-size: 80px; /* 数字字体大小 */
              font-weight: bold; /* 加粗字体 */
              color: #f4b000; /* 黄色数字颜色 */
              margin-right: 25px; /* 数字与单位的间距 */
            }
            .unit {
              font-size: 50px; /* 单位字体大小 */
              font-weight: normal;
              color: #ffffff; /* 单位字体白色 */
            }
            .description {
              margin-top: 40px; /* 与上方文字的间距 */
              font-size: 50px; /* 描述字体大小 */
              color: #ffffff; /* 描述字体白色 */
            }
          }
          .info-container-item1 {
            position: absolute;
            top: 450px;
            left: 540px;
          }
          .info-container-item2 {
            position: absolute;
            top: 450px;
            left: 1420px;
          }
          .info-container-item3 {
            position: absolute;
            top: 450px;
            left: 390px;
          }
          .info-container-item4 {
            position: absolute;
            top: 450px;
            left: 1270px;
          }
          .info-container-item5 {
            position: absolute;
            top: 850px;
            left: 970px;
          }
          .info-container-item6 {
            position: absolute;
            top: 850px;
            left: 870px;
          }
        }
        .main-header-item:nth-child(2) {
          width: 27%;
          .proportion-info {
            position: absolute;
            top: 800px;
            left: 50%;
            transform: translate(-40%, 0);
            .proportion-info-value {
              font-size: 120px;
              font-weight: 900;
              color: rgba(255, 195, 0, 1);
              margin-bottom: 120px;
            }
            .proportion-info-title {
              font-size: 80px;
              color: #ffffff;
            }
          }
        }
      }
      .main-container {
        height: 40%;
        // border: 1px solid yellow;
        display: flex;
        justify-content: center;
        .custom-table {
          width: 100%;
          height: 100%;
          :deep(.custom-row-0) {
            background-color: #43cf7c66;
            color: #fff;
          }
          :deep(.custom-row-1),
          :deep(.custom-row-2) {
            color: rgba(67, 207, 124, 1);
          }

          :deep(.custom-row-3) {
            background-color: rgba(46, 175, 240, 0.4);
            color: #fff;
          }
          :deep(.custom-row-4),
          :deep(.custom-row-5) {
            color: rgba(61, 216, 255, 1);
          }

          :deep(.custom-row-6) {
            color: #fff;
          }

          :deep(.cell) {
            line-height: 110%;
          }
        }
      }
    }
  }
}
</style>
